<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="../static/DanmuPlayer/src/css/scojs.css" rel="stylesheet">
    <link href="../static/DanmuPlayer/src/css/colpick.css" rel="stylesheet">
    <link href="../static/DanmuPlayer/src/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/DanmuPlayer/src/css/main.css">
    <script type="text/javascript" src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/lay-config.js"></script>
    <!--<link rel="stylesheet" href="../dist/css/danmuplayer.css">-->
    <style>
        .layui-table-cell {
            text-align: center;

            height: auto;

            white-space: normal;

        }

        .layui-table img {
            max-width: 300px
        }

        .goods-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: -10px;
        }

        .layui-card {
            flex: 0 0 calc(25% - 20px);
            /* 25%宽度，减去margin和border的20px */
            text-align: center;
            margin: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .layui-card:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }

        .layui-card-img-top {
            width: 80%;
            /* 缩小图片宽度 */
            height: 300px;
            /* 调整图片高度 */
            object-fit: cover;
            margin: 20px auto;
            /* 上下留白 */
            border-radius: 10px;
            /* 圆润边角 */
        }

        .layui-card-body {
            padding: 0px;
        }
        #danmup {
            margin: 20px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            border-radius: 10px;
            overflow: hidden;
        }
        .fieldset .layui-elem-field {
            margin: 20px 0;
            padding: 20px;
            background-color: #f2f2f2;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="layui-row" style="background-image: url('../static/head_background.png'); background-size: cover;">
        <div class="layui-col-md1">
            <a href="/">
                <img src="../static/logo.png" class="layui-logo" style="height:55px; width: 120px;">
            </a>
        </div>

        <div class="layui-col-md8" action="" style="padding:11px">
            <!-- 添加搜索框 -->
            <div class="layui-input-inline" action="" style="width:850px">
                <input type="text" id="searchInput" placeholder="请输入" class="layui-input">
            </div>
            <button class="layui-btn" id="searchBtn">
                <i class="layui-icon layui-icon-search"></i>
            </button>
        </div>
        <div class="layui-col-md3">
            <ul class="layui-nav" style="padding: 0px; bottom: 3px; background-color: transparent;">
                <li class="layui-nav-item">
                    <a href="/user/car" style="color: gray;">关注</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/chat" style="color: gray;">投稿</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/user/car" style="color: gray;">消息<span id="cart-badge" class="layui-badge">0</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="/v1/personal" style="color: gray;"><img src="../static/gou.png" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/v1/personal">用户信息</a></dd>
                        <dd><a href="/password">修改密码</a></dd>
                        <dd><a href="/loginout">退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>



    <div class="layui-row layui-bg-gray">
        <div class="layui-col-md8 ">
            <div class="layui-row">
                <div class="layui-col-md8  ">
                    <h1 id="videoTitle" style="margin-left:50px"></h1>
                </div>
            </div>
            <div class="layui-row">
                <div id="danmup" style="margin-left:30px;top:10px">
                </div>
            </div>
            <div class="layui-row">
                <br>
            </div>
            <div class="layui-row">
                <p> </p>
            </div>
        </div>
        <div class="layui-col-md4" style="top: 20px">
            <div class="layui-row">
                <br>
            </div>
            <div class="layui-row layui-bg-cyan">
                <div class="layui-col-md5" id="userAvatar"
                    style="display: flex; flex-direction: column; align-items: center;">
                    <img src="../static/gou.png" alt="Default Avatar"
                        style="width: 120px; height: 120px; border-radius: 50%; margin-bottom: 10px;">
                </div>
                <div class="layui-col-md4 layui-col-lg-offset1" style="text-align: center;">
                    <div class="layui-row">
                        <br>
                    </div>
                    <div class="layui-row" id="userNameRow">
                        <h2>作者：lyz</h2>
                    </div>
                    <div class="layui-row" id="userSignatureRow">
                        <p>签名：show me code</p>
                    </div>
                    <div class="layui-row">
                        <br>
                    </div>
                    <div class="layui-row">
                        <button id="followButton" class="layui-btn layui-btn-primary">关注</button>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-md10">
            <p id="videoIntroduction" style="margin-left:70px;top:80px">
            </p>
        </div>
    </div>
    <div class="layui-row" style="margin-top: 20px ;right: 20px;">
        <div class="layui-col-md8">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>评论区</legend>
                <div class="layui-field-box">
                    <textarea id="commentInput" placeholder="请输入评论" class="layui-textarea"></textarea>
                    <button id="submitComment" class="layui-btn layui-btn-normal">提交评论</button>
                </div>
            </fieldset>
        </div>
    </div>

</body>
<script src="../static/DanmuPlayer/src/js/jquery-2.1.4.min.js"></script>
<script src="../static/DanmuPlayer/src/js/jquery.shCircleLoader.js"></script>
<script src="../static/DanmuPlayer/src/js/sco.tooltip.js"></script>
<script src="../static/DanmuPlayer/src/js/colpick.js"></script>
<script src="../static/DanmuPlayer/src/js/jquery.danmu.js"></script>
<script src="../static/DanmuPlayer/src/js/main.js"></script>
<!--<script src="../dist/js/danmuplayer.min.js"></script>-->

<script>
    $(document).ready(function () {
        // 从 cookie 中获取令牌
        var token = getCookie("token");

        // 获取视频详情
        var urlParts = window.location.href.split('/');
        var _id = urlParts[urlParts.length - 1];
        var videoDetailUrl = 'http://43.143.232.128:31000/v1/videos/' + _id;
        var toPostDanmuUrl = 'http://43.143.232.128:31000/v1/danmu/' + _id;
        var toGetDanmuUrl = 'http://43.143.232.128:31000/v1/danmu/' + _id;

        // 获取用户信息
        var userinfoUrl = 'http://43.143.232.128:31000/v1/userinfo/video/' + _id;

        // 获取视频详情
        $.ajax({
            url: videoDetailUrl,
            method: 'GET',
            headers: {
                'Authorization': 'Bearer ' + token
            },
            success: function (response) {
                console.log(response.data.videoUrl);
                if (response.code === 0 && response.data) {
                    // 更新页面元素
                    $('#videoTitle').text(response.data.title);
                    $('#videoIntroduction').text("简介：" + response.data.introduce);
                    $("#danmup").DanmuPlayer({
                        src: response.data.videoUrl,
                        height: "500px",
                        width: "900px",
                        urlToGetDanmu: toGetDanmuUrl,
                        urlToPostDanmu: toPostDanmuUrl,
                    });
                } else {
                    console.error('获取视频详情失败');
                }
            },
            error: function () {
                console.error('获取视频详情失败');
            }
        });

        //获取评论信息
        $('#submitComment').click(function(){
            var comment = $('#commentInput').val();
            if(comment){
                // 在这里添加发送评论的 AJAX 请求
                console.log("提交评论: ", comment);
                // 清空输入框
                $('#commentInput').val('');
            }else{
                alert("请输入评论内容！");
            }
        });

        // 获取用户信息
        $.ajax({
            url: userinfoUrl,
            method: 'GET',
            dataType: 'json',
            headers: {
                'Authorization': 'Bearer ' + token
            },
            success: function (userData) {
                $('#userAvatar img').attr('src', userData.data.avatar);
                $('#userNameRow h2').text('作者：' + userData.data.username);
                $('#userSignatureRow p').text('签名：' + userData.data.signature);
            },
            error: function (xhr, status, error) {
                console.error('AJAX 请求失败:', status, error);
            }
        });

        function getCookie(name) {
            var value = "; " + document.cookie;
            var parts = value.split("; " + name + "=");
            if (parts.length === 2) return parts.pop().split(";").shift();
        }

        layui.use('table', function () {
            var table = layui.table;
            var urlParts = window.location.href.split('/');
            var _id = urlParts[urlParts.length - 1];
            var danMu = 'http://43.143.232.128:31000/v1/barrage/' + _id;
            //第一个实例
            table.render({
                elem: '#demo'
                , height: 420
                , url: danMu //数据接口
                , page: false //开启分页
                , cols: [[ //表头
                    { field: 'time', title: '时间', width: 140 }
                    , { field: 'text', title: '弹幕内容', width: 320 }
                ]]
            });

        });

    });


</script>



</html>